<extend name="extends/extend" />
<block name="loadCss">
    <!--美化 checkbox radio css-->
    <link href="__admin__/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/public/simditor/styles/simditor.css">
    <link href="__admin__/css/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="__admin__/css/plugins/datepicker/datepicker3.css" rel="stylesheet">
    <link href="/static/public/webuploader/webuploader.css" rel="stylesheet">
    <style>
        .litpic_tip{
            line-height: 22px;
            margin: 10px 0;
            padding: 0px 5px;
            font-size: 12px;
            background-color: #b1ebb1;
        .picture_item {
            width: 130px;
            height: 130px;
            border: 1px solid #cccccc;
            padding: 5px;
            float: left;
            position: relative;
            overflow: hidden;
        }
        .picture_item img {
            position: relative;
            z-index: 1;
        }
        .picture_item .picture_del {
            width: 43px;
            height: 20px;
            text-align: center;
            font-size: 12px;
            color: #ffff66;
            cursor: pointer;
            background-color: #ff6600;
            position: absolute;
            z-index: 2;
            right: 5px;
            bottom: 5px;
            display: none;
        }
        .picture_item .picture_go_up {
            width: 40px;
            height: 20px;
            font-size: 12px;
            cursor: pointer;
            background-color: #fff;
            position: absolute;
            z-index: 2;
            left: 5px;
            top: 50%;
            display: none;
        }
    </style>
</block>
<block name="script">
    <!--美化 checkbox radio js-->
    <script src="__admin__/js/plugins/iCheck/icheck.min.js"></script>
    <!--表单验证 插件-->
    <script src="__admin__/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="__admin__/js/plugins/validate/messages_zh.min.js"></script>
    <script type="text/javascript" src="/static/public/simditor/scripts/module.js"></script>
    <script type="text/javascript" src="/static/public/simditor/scripts/hotkeys.js"></script>
    <script type="text/javascript" src="/static/public/simditor/scripts/uploader.js"></script>
    <script type="text/javascript" src="/static/public/simditor/scripts/simditor.js"></script>
    <script src="__admin__/js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="__admin__/js/plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="/static/public/webuploader/webuploader.js"></script>
    <script>
        $(document).ready(function () {
            var editor = new Simditor({
                textarea: $('#editor'),
                upload:{
                    url: '/admin/files/editor',
                    params: {rule:'img'},
                    fileKey: 'upload_file',
                    connectionCount: 3,
                    leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
                },
                pasteImage:true, //支持上传图片从剪贴板粘贴。

            });
            $(".i-checks").iCheck({
                checkboxClass:"icheckbox_square-green",
                radioClass:"iradio_square-green",
            });
            $('#checkForm').validate({
                submitHandler:function(form) {
                    form.submit();
                },
                highlight: function(e) {
                    $(e).closest(".form-group").removeClass("has-success").addClass("has-error")
                },
                success: function(e) {
                    e.closest(".form-group").removeClass("has-error")
                },
                errorClass: "help-block m-b-none",
                rules:{
                    status:{required:true}
                }
            });

            $(".colorpicker").colorpicker();
            $("#datetimepicker").datepicker({
                todayBtn:"linked",
                keyboardNavigation:!1,
                forceParse:!1,
                calendarWeeks:!0,
                autoclose:!0,
                defaultDate : new Date()
            });

            /** 处理 容器
             * @type {*}
             */
            var additional  =   $('#additional');
            var uploader = WebUploader.create({
                auto: true,    // 选完文件后，是否自动上传。
                // 文件接收服务端。
                server: '/admin/files/uploads',
                pick: '#uploader',
                resize: false,
                accept: {
                    title: 'Images',
                    extensions: 'jpg,jpeg,png',
//                    mimeTypes: 'image/*'
                    mimeTypes: 'image/jpg,image/jpeg,image/png'
                },
                method:'POST',
                formData:{
                    rule:'img',
                },
                duplicate:true
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var percent = additional.find('.progress .progress-bar');
                // 避免重复创建
                if ( !percent.length ) {
                    percent = $('<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="'+percentage+'" aria-valuemin="0" aria-valuemax="100" style="width: '+percentage+'%;">'+percentage+'% </div> </div>').appendTo(percent).find('.progress-bar');
                }
                percent.css( 'width', percentage * 100 + '%' );
            });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on( 'uploadSuccess', function( file ,response) {
                response = response.file;
                if(response.error){
                    return  swal({title: response.msg, icon: 'warning',dangerMode: true,});
                }
                var preview = additional.find('.preview');
                if(!preview.length){
                    preview =   $('<div class="preview"></div>').appendTo(additional)
                }
                preview.html('<div class="litpic_tip">'+response.data.name+' 上传成功('+response.data.size+'b)</div><div id="litpic_show"><img src="'+response.data.save_path+'" width="120"></div>');
                $('#thumbnail').val(response.data.save_path);
                swal({title:'上传成功！', icon: 'success',dangerMode: true,})
            });
            // 文件上传失败，显示上传出错。
            uploader.on( 'uploadError', function( file ) {
                swal({title: '上传失败！', icon: 'warning',dangerMode: true,});
            });
            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on( 'uploadComplete', function( file ) {
                additional.find('.progress .progress-bar').remove();
            });
        });
    </script>
</block>
<block name="content">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>[ {$current->name} ] - 新增</h5>
                        <div class="ibox-tools">
                            <a href="javascript:history.go(-1);" class="btn btn-outline btn-info btn-xs">
                                <i class="fa fa-arrow-circle-left"></i> 返回
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form method="post" action="" class="form-horizontal" id="checkForm">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">标题</label>
                                <div class="col-sm-10">
                                    <input type="text" name="title"  required class="form-control">
                                </div>
                            </div>
                            <!--<div class="hr-line-dashed"></div>-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">短标题</label>
                                <div class="col-sm-10">
                                    <input type="text" name="short_title"   class="form-control">
                                </div>
                            </div>
                            <!--<div class="hr-line-dashed"></div>-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">标题颜色</label>
                                <div class="col-sm-10">
                                    <input type="text" name="color" class="form-control colorpicker" />
                                </div>
                            </div>
                            <!--<div class="hr-line-dashed"></div>-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">所属栏目</label>
                                <div class="col-sm-10">
                                    <select class="form-control m-b" name="column_id">
                                        <volist name="column" id="v">
                                         <option value="{$v['column_id']}">{$v['delimiter']}{$v['name']}</option>
                                        </volist>
                                    </select>
                                </div>
                            </div>
                            <!--<div class="hr-line-dashed"></div>-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">栏目图片</label>
                                <div class="col-sm-4">
                                    <input type="text" name="thumbnail" id="thumbnail" class="form-control">
                                </div>
                                <div class="col-sm-6">
                                    <!--<span class="webuploader-pick btn-success" style="background-color: #1c84c6;">选择站内图片</span>-->
                                    <span  id="uploader" class="webuploader-container">添加图片</span>
                                </div>
                                <label class="col-sm-2 control-label"></label>
                                <div class="col-sm-10" id="additional"></div>
                            </div>

                            <!--<div class="hr-line-dashed"></div>-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">摘要</label>
                                <div class="col-sm-10">
                                    <textarea  name="description" class="form-control"></textarea>
                                </div>
                            </div>

                            <!--<div class="hr-line-dashed"></div>-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">来源</label>
                                <div class="col-sm-10">
                                    <input type="text" name="source"   class="form-control">
                                </div>
                            </div>
                            <!--<div class="hr-line-dashed"></div>-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">内容</label>
                                <div class="col-sm-10">
                                    <textarea name="content" id="editor"></textarea>
                                </div>
                            </div>
                            <!--<div class="hr-line-dashed"></div>-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">作者</label>
                                <div class="col-sm-10">
                                    <input type="text" name="author"   class="form-control">
                                </div>
                            </div>
                            <!--<div class="hr-line-dashed"></div>-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">关键词</label>
                                <div class="col-sm-10">
                                    <input type="text" name="keywords" class="form-control">
                                </div>
                            </div>
                            <!--<div class="hr-line-dashed"></div>-->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">发布时间</label>
                                <div class="col-sm-10">
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" name="release_time"  id="datetimepicker">
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">评论</label>
                                <div class="col-sm-10">
                                    <div class="radio i-checks">
                                        <label>
                                            <input type="radio" value="1" checked name="comment"> <i></i> 允许</label>
                                    </div>
                                    <div class="radio i-checks">
                                        <label>
                                            <input type="radio" value="0"  name="comment"> <i></i> 禁止</label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    {:token()}
                                    <button class="btn btn-primary" type="submit">保存</button>
                                    <button class="btn btn-primary" type="reset">重置</button>
                                    <button class="btn btn-primary" type="button" onclick="history.go(-1)">返回</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>